const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
const selectEle = document.querySelector("#select");

const Radius = 50;

function drawText() {
    context.save();
    context.fillStyle = "cornflowerblue";
    context.fillText(
        "HTML 5",
        canvas.width / 4,
        canvas.height / 2,
        canvas.width / 2
    );
    context.restore();
}

function drawArc(x, y) {
    context.globalCompositeOperation = selectEle.value;
    context.beginPath();
    context.arc(x, y, Radius, 0, Math.PI * 2, false);
    context.fillStyle = "orange";
    context.stroke();
    context.fill();
}

function windowToCanvas(x, y) {
    let bbox = canvas.getBoundingClientRect();
    return {
        x: x - bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top * (canvas.height / bbox.height)
    };
}
context.canvas.addEventListener("mousemove", e => {
    const { x, y } = windowToCanvas(e.clientX, e.clientY);
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    drawText();
    context.save();
    drawArc(x, y);
    context.restore();
});
context.font = "64pt Comic-sans";
drawText();
